<template>
  <div class="div1">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>创建新闻</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="newsForm"
        :rules="rules"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="newsForm.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <editor
            style="width: 100%"
            :newsFormcontent="newsForm.content"
            @content="handldercontent"
          ></editor>
        </el-form-item>
        <el-form-item label="类别" prop="category">
          <el-select v-model="newsForm.category">
            <el-option label="最新动态" value="1" />
            <el-option label="典型案例" value="2" />
            <el-option label="通知公告" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="封面">
          <upload :imgUrl="newsForm.cover" @uploadimg="uploadimg" />
        </el-form-item>
        <el-form-item>
          <el-button  @click="addnewsbuttom" type="primary">
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import upload from "./upload.vue";
import editor from "./editor.vue";
import dayjs from "dayjs";
import { NewEdit } from "@/request/home/userapi.js";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted, watch, computed } from "vue";

import { useRoute,useRouter } from "vue-router";
const Route =useRoute()
const Router = useRouter()
const newsForm = reactive({
  title: "",
  content: "",
  category: "1",
  isPublish: 0,
  cover: "",
  file: null,
});

const Editdata =JSON.parse(Route.query.new)

if (Editdata) {
  Object.keys(Editdata).forEach((key) => {
    newsForm[key] = Editdata[key];
  });
  newsForm.category = newsForm.category.toString();
}

function handldercontent(value) {
  newsForm.content = value;
}
function uploadimg(value) {
  newsForm.file = value;
  console.log(newsForm.file);
}
const ruleFormRef = ref();
const validatePass = (rule, value, callback) => {
  if (newsForm.content === "<p><br></p>") {
    callback(new Error("请输入内容"));
  } else callback();
};
const rules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
  content: [{ validator: validatePass, trigger: "blur" }],
  category: [{ required: true, message: "请选择类型", trigger: "blur" }],
});
const addnewsbuttom = () => {
  ruleFormRef.value.validate(async (test) => {
    if (test) {
      const params = new FormData();
      params.append("id", newsForm.id);
      params.append("title", newsForm.title);
      params.append("content", newsForm.content);
      params.append("category", newsForm.category);
      params.append("isPublish", newsForm.isPublish);
      params.append("cover", newsForm.cover);
      params.append("file", newsForm.file);
      const result = await NewEdit(params);

      if (result.data.code === 200) {
        ElMessage({
          message: result.data.msg,
          type: "success",
        });

        Router.replace({
          name:"NewList"
        })
      } else {
        Store.NowLoginuser = result.data.result;
        ElMessage({
          message: result.data.msg,
          type: "error",
        });
      }
    }
  });
};

defineExpose({
  addnewsbuttom,
});
</script>

<style scoped>
.div1 {
  background: rgb(255, 255, 255);
  width: 100%;
}

.box-card {
  width: 100%;
}
</style>